import type {BacktopProps} from './backtop';

import {onMounted, ref, shallowRef} from 'vue';

import {useEventListener, useThrottleFn} from '@vueuse/core';

export const useBackTop = (props: BacktopProps) => {
    const el = shallowRef<HTMLElement>();
    const container = shallowRef<Document | HTMLElement>();
    const visible = ref(false);

    const handleScroll = () => {
        if (el.value) {
            visible.value = el.value.scrollTop >= (props?.visibilityHeight ?? 0);
        }
    };

    const handleClick = () => {
        el.value?.scrollTo({behavior: 'smooth', top: 0});
    };

    const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);

    useEventListener(container, 'scroll', handleScrollThrottled);
    onMounted(() => {
        container.value = document;
        el.value = document.documentElement;

        if (props.target) {
            el.value = document.querySelector<HTMLElement>(props.target) ?? undefined;

            if (!el.value) {
                throw new Error(`target does not exist: ${props.target}`);
            }
            container.value = el.value;
        }
        // Give visible an initial value, fix #13066
        handleScroll();
    });

    return {
        handleClick,
        visible,
    };
};
